<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style>
            .view {
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
            }
            body {
                background: black;
            }
        </style>        
        <script type="text/javascript" src="../../../../lib/core/ht.js"></script>
        <script type="text/javascript" src="../../../../lib/plugin/ht-flow.js"></script>
        <script type="text/javascript" src="../../../../lib/plugin/ht-xeditinteractor.js"></script>
        <script type="text/javascript" src="../../../../lib/plugin/ht-contextmenu.js"></script>
        <script type="text/javascript" src="contextmenu.js"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
            ht.Default.setImage("arrow", "");
            ht.Default.setImage("bus", "");
            function init() {
                var graph = window.graph = new ht.graph.GraphView(),
                    editInteractor = window.editInteractor = new ht.graph.XEditInteractor(graph),
                    dm = graph.dm(),
                    view = graph.getView();
                
                var shape = new ht.Shape();
                shape.setPoints(new ht.List([
                    {x: 0, y: 0},
                    {x: 0, y: 100},
                    {x: 100, y: 200},
                    {x: 150, y: 100},
                    {x: 200, y: 0},
                    {x: 300, y: 0},
                    {x: 350, y: 100}
                ]));
                shape.setSegments(new ht.List([
                    1, 2, 3, 4
                ]));
                shape.setPosition(814, 313);
                shape.s("flow", true);
                shape.s("flow.count", 3);
                shape.s("shape.border.width", 1);
                shape.s("shape.border.color", "rgb(240, 255, 114)");
                shape.s("shape.background", null);
                dm.add(shape);
                
                var shape1 = new ht.Shape();
                shape1.setPoints(new ht.List([
                    {x: 0, y: 100},
                    {x: 0, y: 0},
                    {x: 200, y: 0},
                    {x: 200, y: 100}
                ]));
                shape1.setSegments(new ht.List([1,4]));
                shape1.setPosition(113, 371);
                shape1.s("flow", true);
                shape1.s("flow.count", 2);
                dm.add(shape1);
                
                
                var shape2 = new ht.Shape();
                shape2.setPoints(new ht.List([                    
                    // draw H
                    {x: 20, y: 0},
                    {x: 20, y: 100},
                    {x: 20, y: 50},
                    {x: 80, y: 50},
                    {x: 80, y: 0},
                    {x: 80, y: 100},
                    // draw T
                    {x: 120, y: 0},
                    {x: 180, y: 0},
                    {x: 150, y: 0},
                    {x: 150, y: 100}                    
                ]));                                
                shape2.setSegments(new ht.List([
                    // draw H
                    1, 2, 1, 2, 1, 2,
                    // draw T
                    1, 2, 1, 2
                ]));
                shape2.setPosition(442, 262);
                shape2.setStyle("shape.background", null);
                shape2.setStyle("shape.border.width", 10);
                shape2.setStyle("shape.border.color", "#1ABC9C");
                shape2.s("flow", true);
                dm.add(shape2);
                
                var shape3 = new ht.Shape(),
                    h = 10;
                shape3.setPoints(new ht.List([                                        
                    {x: 0, y: 0},
                    {x: 25, y: -h},
                    {x: 50, y: 0},
                    {x: 75, y: h},
                    {x: 100, y: 0},                                     
                    {x: 125, y: -h},
                    {x: 150, y: 0},                    
                    {x: 175, y: h},
                    {x: 200, y: 0}
                ]));                                
                shape3.setSegments(new ht.List([
                    1, 3, 3, 3, 3
                ]));     
                shape3.setPosition(890, 0);
                shape3.setStyle("shape.background", null);
                shape3.setStyle("shape.border.width", 2);
                shape3.setStyle("shape.border.color", "#3498DB");
                shape3.setStyle("flow", true);
                dm.add(shape3);
                
                var shape4 = new ht.Shape();
                shape4.setPoints(new ht.List([
                    {x: 0, y: 0},
                    {x: 200, y: 100},
                    {x: 400, y: 0}
                ]));
                shape4.setSegments(new ht.List([
                    1, 3
                ]));
                shape4.setPosition(786, 164);
                shape4.s("shape.background", null);
                shape4.s("shape.border.color", "rgb(203, 78, 7)");
                shape4.s("shape.border.width", 1);
                shape4.s("flow", true);
                shape4.s("flow.count", 5);
                shape4.s("flow.element.count", 2);
                shape4.s("flow.element.space", 30);
                shape4.s("flow.element.max", 30);
                shape4.s("flow.element.min", 30);
                shape4.s("flow.element.image", "arrow");
                shape4.s("flow.element.shadow.visible", false);
                shape4.s("flow.element.autorotate", true);
                dm.add(shape4);
                
                var shape5 = new ht.Shape();
                shape5.setPoints(new ht.List([
                    {x: 0, y: 0},
                    {x: 100, y: 100},
                    {x: 200, y: 0},
                    {x: 100, y: -100},
                    {x: 0, y: 0}
                ]));
                shape5.setSegments(new ht.List([
                    1, 3, 3
                ]));
                shape5.setPosition(420, 93);
                shape5.s("flow", true);
                shape5.s("flow.count", 2);
                shape5.s("shape.background", null);
                shape5.s("shape.border.width", 1);
                dm.add(shape5);
                    
                var shape6 = new ht.Shape();
                shape6.setPoints(new ht.List([
                    {x: 165, y: 40},
                    {x: 79, y: 241},
                    {x: 261, y: 104},
                    {x: 69, y: 104},
                    {x: 251, y: 241},
                    {x: 165, y: 40}
                ]));
                shape6.setSegments(new ht.List([
                    1, 2, 2, 2, 2, 2
                ]));
                shape6.translate(10, 0);
                shape6.s("flow", true);
                shape6.s("flow.count", 38);
                shape6.s("flow.element.count", 1);
                shape6.s("shape.background", null);
                shape6.s("shape.border.width", 1);
                dm.add(shape6);
                
                
                var shape7 = new ht.Shape();
                shape7.setPoints(new ht.List([
                    {x: 20, y: 0},
                    {x: 100, y: 0},
                    {x: 200, y: 0},
                    {x: 300, y: 0},
                    {x: 400, y: 0},
                    {x: 500, y: 0},
                    {x: 600, y: 0},
                    {x: 700, y: 0}
                ]));                                
                shape7.setSegments(new ht.List([
                    1, 2, 1, 2, 1, 2, 1, 2
                ]));
                shape7.translate(20, 0);
                shape7.setStyle("shape.background", null);
                shape7.setStyle("shape.border.color", "#1ABC9C");
                shape7.setStyle("shape.border.width", 2);
                shape7.s("flow", true);
                shape7.s("flow.count", 1);
                shape7.s("flow.step", 2);
                dm.add(shape7);
                
                var node1 = new ht.Node(),
                    node2 = new ht.Node(),
                    edge1 = new ht.Edge(node1, node1),
                    edge2 = new ht.Edge(node1, node2),
                    edge3 = new ht.Edge(node1, node2);
                
                dm.add(node1);
                
                node2.setPosition(0, 200);
                dm.add(node2);
                
                edge1.s("flow", true);
                dm.add(edge1);
                
                edge2.s("flow", true);
                edge2.s("flow.reverse", true);
                edge2.s("flow.element.background", "rgba(255, 0, 0, 0.4)");
                edge2.s("flow.element.shadow.begincolor", "rgba(194, 62, 0, 0.3)");
                edge2.s("flow.element.shadow.endcolor", "rgba(194, 62, 0, 0)");
                dm.add(edge2);
                
                edge3.s("edge.type", "points");
                edge3.s("edge.points", new ht.List([
                    { x: 0, y: 25 },
                    { x: 25, y: 25 },
                    { x: 25, y: 50 },
                    { x: 50, y: 50 },
                    { x: 50, y: 75 },
                    { x: 75, y: 75 },
                    { x: 75, y: 200 }
                ]));
                edge3.s("flow", true);
                edge3.s("flow.element.max", 30);
                edge3.s("flow.element.count", 1);
                edge3.s("flow.element.image", "bus");
                edge3.s("flow.element.shadow.visible", false);
                edge3.s("flow.element.autorotate", true);
                dm.add(edge3);
                
                var contextMenu = new ht.widget.ContextMenu([]);
                contextMenu.addTo(view);
                contextMenu.afterShow = function() {
                    editInteractor._pause = true;
                };
                contextMenu.afterHide = function() {
                    editInteractor._pause = false;
                };
                contextMenu.beforeShow = function() {
                    if (editInteractor._hoverSegmentIndex >= 0) {
                        var shape = editInteractor._shape,
                            segments = shape.getSegments(),
                            segment = segments.get(editInteractor._hoverSegmentIndex);
                            contextMenuChangeToMove.selected = segment === 1;
                            contextMenuChangeToLine.selected = segment === 2;
                            contextMenuChangeToQuadratic.selected = segment === 3;
                            contextMenuChangeToBezier.selected = segment === 4;
                        contextMenu.setItems([contextMenuChangeToMove, contextMenuChangeToLine, contextMenuChangeToQuadratic, contextMenuChangeToBezier, contextMenuAddPoint]);
                    } else if(editInteractor._removePointIndex >= 0) {
                        contextMenu.setItems([contextMenuRemovePoint]);
                    } else {
                        contextMenu.setItems(null);
                    }
                };
                graph.setInteractors(new ht.List([
                    new ht.graph.SelectInteractor(graph),
                    editInteractor,
                    new ht.graph.MoveInteractor(graph),
                    new ht.graph.DefaultInteractor(graph),
                    new ht.graph.TouchInteractor(graph , {editable: false})
                ]));
                view.className = "view";
                document.body.appendChild(view);
                
                graph.translate(-40, -20);
                graph.setZoom(0.8);
                graph.enableFlow(60);
            }
        </script>
    </head>
    <body onload="init();">
        
    </body>
</html>
